<nav class="navbar navbar-static-top" role="navigation">
  <a class="navbar-btn sidebar-toggle" data-toggle="offcanvas" ng-click="toggleSidebar()" role="button">
    <span class="sr-only" translate>Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>

  <div class="navbar-right">
    <ul class="nav navbar-nav">
      <li class="dropdown user user-menu">
        <a class="dropdown-toggle" data-toggle="dropdown">
          <i class="fa fa-flag flag-icon flag-icon-{{selectLocale.country.toLowerCase() }}"></i>
          {{ selectLocale.name | translate }} <i class="caret"></i> </span>
        </a>
        <ul class="dropdown-menu">
          <li ng-repeat="(index, locale) in locales" ng-show="locale != selectLocale">
            <a ng-click="setLocale(index)">
              <span class="flag-icon flag-icon-{{locale.country.toLowerCase() }}"></span> {{locale.name | translate }}
            </a>
          </li>
        </ul>
      </li>
      <li class="dropdown user user-menu">
        <a class="dropdown-toggle" data-toggle="dropdown">
          <i class="glyphicon glyphicon-user"></i>
          <span>{{currentUser.firstName || currentUser.profiles[0].profile.name.givenName}}<i class="caret"></i></span>
        </a>
        <ul class="dropdown-menu">
          <li class="user-header bg-light-blue">
            <img gravatar-src="currentUser.email" class="img-circle" alt="User Image">

            <p>
              {{currentUser.firstName || currentUser.profiles[0].profile.displayName}}
              <small>{{currentUser.email}}</small>
            </p>
          </li>
          <li class="user-footer">
            <div class="pull-left">
              <a ui-sref="app.users.profile" class="btn btn-default btn-flat" translate>Profile</a>
            </div>
            <div class="pull-right">
              <a ng-click="logout()" class="btn btn-default btn-flat" translate>Sign out</a>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
